import { SchemaManage } from '@/components/SchemaComponent';
import { ManageCommonAPI } from '@/pages/type';
import { useMemo, useRef, useState } from 'react';
import { connect } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { delegateManageService, setDelegateSwitchService } from '../services';
import { getTableColumns } from '../mconfig';
import { UpdateViewModal } from './UpdateViewModal';
import { TipsErrorModalNew } from '@/components/TipsErrorModalNew';
import { message } from 'antd';
import { DetailDrawer } from './DetailDrawer';

const DelegateManageView: React.FC<DelegateManageAPI.IManageType> = ({ curRes }) => {
  /** 管理页ref */
  const schemaManageRef: any = useRef();

  /** 申请页ref */
  const tipErrorModalRef: any = useRef();

  /**  获取管理页数据 */
  const { data, loading, pagination, searchList, getDeleGateData, reloadRefresh } = delegateManageService(curRes);

  /** 添加或编辑 */
  const [updataModalState, setUpdataModalState] = useState<Record<string, any>>({
    isShowModal: false,
    checkRowsInfo: {},
  });

  /** 查看详情页面  */
  const [detailDrawerState, setDetailDrawerState] = useState<Record<string, any>>({
    isShowModal: false,
    checkRowsInfo: {},
  });

  /** 委托状态提示框 */
  const [openDelegateSwitchInfo, setDelegateSwitchInfoModal] = useState<Record<string, any>>({
    checkRowsInfo: {},
    isShowModal: false,
  });

  /**  重置搜索表单方法 */
  const onReset = (values: any) => {
    getDeleGateData({ ...values });
  };

  /**  搜索列表 */
  const onSearch = (request: ManageCommonAPI.IGridRequestType) => {
    getDeleGateData({ ...request });
  };

  /** 分页change 方法 */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    getDeleGateData({ pageSize, current, ...params });
  };

  /** 刷新管理页面 */
  const reloadManage = () => {
    reloadRefresh();
  };

  /** 表格操作按钮点击方法 */
  const onOptClick: DelegateManageAPI.IOperationClick = {
    /**查看 */
    onView: (resObj) => {
      setDetailDrawerState({
        isShowModal: true,
        checkRowsInfo: resObj,
      });
    },
    /**编辑 */
    onEdit: (resObj) => {
      setUpdataModalState({
        isShowModal: true,
        checkRowsInfo: resObj,
      });
    },
    /**启用 */
    onSwitch: (resObj) => {
      setDelegateSwitchInfoModal({
        checkRowsInfo: resObj,
        isShowModal: true,
      });
    },
  };

  /** 获取columns方法 */
  const columns: Record<string, any>[] = useMemo(() => {
    return getTableColumns(curRes, onOptClick);
  }, [curRes]);

  /** 操作按钮列表 */
  const actionList: ManageCommonAPI.IActionList = useMemo(() => {
    return [
      {
        title: '添加',
        visible: curRes?.['/delegateController/add'] || false,
        type: 'primary',
        icon: <PlusOutlined />,
        onClick: () => {
          setUpdataModalState({
            isShowModal: true,
            checkRowsInfo: {},
          });
        },
      },
    ];
  }, [curRes]);

  /** 委托状态按钮关闭 */
  const tipOnClose = () => {
    setDelegateSwitchInfoModal({
      checkRowsInfo: {},
      isShowModal: false,
    });
  };

  /** 设置状态接口回调 */
  const setSwitchCallback = (res: any) => {
    if (res && res?.msgFlag) {
      message.success(res?.msg);
      reloadManage();
      tipOnClose();
    } else {
      message.error(res?.msg);
    }
  };

  /** 引入设置状态接口 */
  const { setDelegateSwitchRun } = setDelegateSwitchService(setSwitchCallback);

  /** 设置状态按钮 */
  const setDelegateSwitchModalOnOK = () => {
    const deletePayload: Record<string, any> = {
      id: openDelegateSwitchInfo?.checkRowsInfo?.id,
      versionNum: openDelegateSwitchInfo?.checkRowsInfo?.versionNum,
      isOpen:
        openDelegateSwitchInfo?.checkRowsInfo?.isOpen == '1' ? 0 : openDelegateSwitchInfo?.checkRowsInfo?.isOpen == '0' ? 1 : '',
    };
    setDelegateSwitchRun(deletePayload);
  };

  return (
    <div
      style={{
        position: 'relative',
        overflow: 'hidden',
        height: '100%',
        width: '100%',
      }}
    >
      <SchemaManage
        ref={schemaManageRef}
        searchProps={{
          switchList: [],
          searchList,
          onSwitch: () => {},
          onReset,
          onSearch,
        }}
        actionList={actionList}
        tableProps={{
          columns,
          dataSource: data?.rows,
          loading,
          pagination: pagination as any,
          rowKey: 'id',
          onPageChange, //分页onchange
        }}
      />

      {/* 查看详情抽屉 */}
      <DetailDrawer
        curRes={curRes}
        onClose={() => {
          setDetailDrawerState({
            isShowModal: false,
            checkRowsInfo: {},
          });
        }}
        isShowDetail={detailDrawerState?.isShowModal}
        recordObj={detailDrawerState?.checkRowsInfo}
      />

      {/* 添加编辑弹框 */}
      {updataModalState?.isShowModal && (
        <UpdateViewModal
          onClose={() => {
            setUpdataModalState({
              isShowModal: false,
              checkRowsInfo: {},
            });
          }}
          checkRowsInfo={updataModalState?.checkRowsInfo}
          reloadManage={reloadManage}
          curRes={curRes}
        />
      )}

      {/* 禁用提示框 */}
      {openDelegateSwitchInfo?.isShowModal && (
        <TipsErrorModalNew
          ref={tipErrorModalRef}
          modalLoading={false}
          onClose={tipOnClose}
          modalOnOK={setDelegateSwitchModalOnOK}
          tipTextColor="#000"
          modalTip={
            <div>
              确认是否
              {openDelegateSwitchInfo?.checkRowsInfo?.isOpen == '1'
                ? '禁用'
                : openDelegateSwitchInfo?.checkRowsInfo?.isOpen == '0'
                ? '启用'
                : '启用'}
              【<span style={{ color: 'red' }}>{openDelegateSwitchInfo?.checkRowsInfo?.delegateReason || '--'}</span>】该委托状态?
            </div>
          }
        />
      )}
    </div>
  );
};

export default connect(({ baseLogin }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
}))(DelegateManageView);
